<template>
  <div>
    <div id="vue-full-calendar" />
    <el-dialog
      :visible.sync="showFilterDialog"
      width="600px"
    >
      <span slot="title">
        <div style="padding:20px;">过滤</div>
      </span>
      <el-form label-position="left" label-width="80px">
        <el-form-item label="班组">
          <el-select v-model="selectShift" @change="changeShift">
            <el-option v-for="shift in shifts" :key="shift" :label="shift" :value="shift" />
          </el-select>
        </el-form-item>
        <el-form-item label="人员">
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group
            v-model="selectWorkers"
            @change="handleWorkerChange"
          >
            <el-checkbox v-for="worker in workers" :key="worker" :label="worker">{{ worker }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-button type="primary" style="float:right;" @click="doFilter">确定</el-button>
        <div class="clearfix" />
      </el-form>
    </el-dialog>
    <el-dialog
      :visible.sync="showChangeShiftDialog"
      width="850px"
    >
      <span slot="title">
        <div style="padding:20px;">调整</div>
      </span>
      <div>
        <div style="width:200px;float:left;margin-right:20px;">
          <el-form label-position="top" label-width="80px">
            <el-form-item label="组织机构">
              <el-input />
            </el-form-item>
            <el-form-item label="日期">
              <el-input />
            </el-form-item>
            <el-form-item label="班次">
              <el-input />
            </el-form-item>
            <el-form-item label="最后修改人">
              <el-input />
            </el-form-item>
            <el-form-item label="最后修改时间">
              <el-input />
            </el-form-item>
          </el-form>
        </div>
        <div style="height:300px;float:right;width:580px;">
          <el-form label-position="left" :inline="true" label-width="80px">
            <el-form-item label="当前班组" style="float:left;">
              <el-input style="width:199px;">
                <el-button slot="append" icon="el-icon-refresh" @click="exchangeShifts" />
              </el-input>
            </el-form-item>
            <el-form-item label="任务归属" style="float:right;">
              <el-input />
            </el-form-item>
            <el-form-item style="width:100%;" label-width="100%">
              <div slot="label" style="margin-right: -2px;margin-bottom:10px;">
                <span>人员配置</span>
                <el-button type="primary" size="small" style="float:right;">删除</el-button><el-button type="primary" size="small" style="float:right;margin-right:10px;" @click="changeWorkers">新增</el-button>
              </div>
              <div style="border:1px solid #ddd; width:570px; height:190px;">
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
                <span style="display:inline-block; line-height:15px; padding:2px 15px; margin:5px; border: 1px solid #1890FF;border-radius: 15px;">张三<br>甲醛甲班</span>
              </div>
            </el-form-item>
            <el-form-item style="width:100%;" label-width="100%">
              <div slot="label">
                <span>变更原因</span>
              </div>
              <el-input type="textarea" :rows="4" :autosize="{minRows:4, maxRow: 6}" style="width:570px;" />
            </el-form-item>
            <el-form-item style="width:100%;">
              <div style="width:570px;">
                <el-button type="primary" style="float:right;" @click="doChangeShift">确定</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="clearfix" />
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="showAddWorkersDialog"
      width="700px"
    >
      <span slot="title">
        <div style="padding:20px;">新增人员</div>
      </span>
      <el-form label-position="left" label-width="80px">
        <el-form-item label="组织机构">
          <el-select v-model="selectShift">
            <el-option v-for="shift in shifts" :key="shift" :label="shift" :value="shift" />
          </el-select>
        </el-form-item>
        <el-form-item label="班组">
          <el-select v-model="selectShift">
            <el-option v-for="shift in shifts" :key="shift" :label="shift" :value="shift" />
          </el-select>
        </el-form-item>
        <el-form-item label="人员">
          <el-transfer :data="transferWorkers" />
        </el-form-item>
        <el-button type="primary" style="float:right;" @click="doChangeWorkers">确定</el-button>
        <div class="clearfix" />
      </el-form>
    </el-dialog>
    <el-dialog
      :visible.sync="showExchangeShiftsDialog"
      width="700px"
    >
      <span slot="title">
        <div style="padding:20px;">调整班组</div>
      </span>
      <el-form label-position="left" label-width="80px">
        <el-form-item label="当前班组">
          <el-input value="甲班" />
        </el-form-item>
        <el-form-item label="目标班组">
          <el-radio-group>
            <el-radio label="乙班" border>乙班</el-radio>
            <el-radio label="丙班" border>丙班</el-radio>
            <el-radio label="丁班" border>丁班</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-button type="primary" style="float:right;" @click="doExchangeShifts">确定</el-button>
        <div class="clearfix" />
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import 'fullcalendar'
import 'fullcalendar/dist/fullcalendar.css'
export default {
  data() {
    const map = new Map()
    map.set('甲班', ['张三', '李四', '王五', '周大喵', '李大嘴', '张无忌'])
    map.set('乙班', ['苏大强', '王五', '陈奕迅', '周杰伦'])
    map.set('丙班', ['李四', '王五', '周大喵', '哈哈', '呵呵'])
    map.set('丁班', ['刘亦菲'])
    const data = []
    for (let i = 0; i < 5; i++) {
      data.push({
        key: i,
        label: '张三' + i
      })
    }
    return {
      calendar: null,
      // 人员、班组视图切换
      viewWorker: true,
      // 过滤功能弹框
      showFilterDialog: false,
      shifts: ['甲班', '乙班', '丙班', '丁班'],
      selectShift: '甲班',
      workerMap: map,
      selectWorkers: ['张三', '李四', '王五', '周大喵', '李大嘴', '张无忌'],
      isIndeterminate: false,
      checkAll: true,
      // 调整弹框
      showChangeShiftDialog: false,
      // 新增人员弹框
      showAddWorkersDialog: false,
      transferWorkers: data,
      transferSelectedWorkers: [],
      // 调整班组弹框
      showExchangeShiftsDialog: false
    }
  },
  computed: {
    workers() {
      return this.workerMap.get(this.selectShift)
    },
    defaultConfig() {
      const self = this
      return {
        firstDay: 1, // 以周日为每周的第一天
        // weekends: true,/ /是否在日历中显示周末
        locale: 'zh-cn', // 语言
        defaultView: 'month', // 默认按月显示
        fixedWeekCount: false, // 是否固定显示六周
        // weekMode:"liquid", //周数不定，每周的高度可变，整个日历高度不变
        allDaySlot: false,
        customButtons: {
          filter: {
            text: '过滤',
            click: function() {
              self.showFilterDialog = true
            }
          },
          view: {
            text: '班组',
            click: function(event) {
              self.viewWorker = !self.viewWorker
              self.$(event.target).html(self.viewWorker ? '班组' : '人员')
            }
          }
        },
        header: {
          left: '',
          center: 'title',
          right: 'prev,next,view,filter'
        },
        editable: false,
        selectable: false,
        selectHelper: false,
        height: 'auto',
        contentHeight: 'auto',
        aspectRatio: 1.8,
        timeFormat: 'HH:mm',
        events: self.events,
        eventSources: self.eventSources,
        // 视图渲染完毕回调
        viewRender() {
          if (self.viewWorker) {
            self.$('.fc .fc-view-container .fc-month-view .fc-bg .workers').removeClass('hidden')
            self.$('.fc .fc-view-container .fc-month-view .fc-scroller .fc-row').css('height', '205px')
          } else {
            self.$('.fc .fc-view-container .fc-month-view .fc-bg .workers').addClass('hidden')
            self.$('.fc .fc-view-container .fc-month-view .fc-scroller .fc-row').css('height', '100px')
          }
        },
        dayClick(...args) {
          const target = self.$(args[1].target)
          if (target.hasClass('fc-other-month')) {
            return
          }
          const moment = args[0]
          const dateStr = moment.format('YYYY-MM-DD')
          const currentShifts = self.events.filter(event => event.start.startsWith(dateStr))
          const nightTarget = target.closest('.night')
          const dayTarget = target.closest('.day')
          const middleTarget = target.closest('.middle')
          let shifts = []
          if (!self._.isEmpty(nightTarget)) {
            shifts = currentShifts.find(shift => shift.start.endsWith('00:00:00'))
          } else if (!self._.isEmpty(dayTarget)) {
            shifts = currentShifts.find(shift => shift.start.endsWith('08:00:00'))
          } else if (!self._.isEmpty(middleTarget)) {
            shifts = currentShifts.find(shift => shift.start.endsWith('16:00:00'))
          }
          console.log('shifts', shifts)
          self.showChangeShiftDialog = true
        },
        dayRender(...args) {
          if (args[1].hasClass('fc-other-month')) {
            return
          }
          const moment = args[0]
          const dateStr = moment.format('YYYY-MM-DD')
          const currentShifts = self.events.filter(event => event.start.startsWith(dateStr))
          const night = currentShifts.find(shift => shift.start.endsWith('00:00:00'))
          const day = currentShifts.find(shift => shift.start.endsWith('08:00:00'))
          const middle = currentShifts.find(shift => shift.start.endsWith('16:00:00'))
          args[1].html(`<div class="wrapper">
                        <div class="header"></div>
                        <div class="schedules">
                          <div class="night"></div>
                          <div class="day"></div>
                          <div class="middle"></div>
                        </div>
                      </div>`)
          args[1].find('.schedules>.night').append(self.renderCustomEvent(night))
          args[1].find('.schedules>.day').append(self.renderCustomEvent(day))
          args[1].find('.schedules>.middle').append(self.renderCustomEvent(middle))
        },
        eventRender(...args) {
          args[1].css('display', 'none')
        },
        // eventDestroy(event) {
        //   console.log('eventDestroy1', event)
        //   if (self.sync) {
        //     self.events = self.cal.fullCalendar('clientEvents')
        //   }
        // },
        eventClick(...args) {
          console.log(args)
        }
      }
    }
  },
  watch: {
    events: {
      deep: true,
      handler(val) {
        this.calendar.fullCalendar('removeEvents')
        this.calendar.fullCalendar('addEventSource', val)
      }
    },
    eventSources: {
      deep: true,
      handler() {
        this.$emit('rebuild-sources')
      }
    },
    viewWorker() {
      this.$nextTick(() => {
        if (this.viewWorker) {
          this.$('.fc .fc-view-container .fc-month-view .fc-bg .workers').removeClass('hidden')
          this.$('.fc .fc-view-container .fc-month-view .fc-scroller .fc-row').css('height', '205px')
        } else {
          this.$('.fc .fc-view-container .fc-month-view .fc-bg .workers').addClass('hidden')
          this.$('.fc .fc-view-container .fc-month-view .fc-scroller .fc-row').css('height', '100px')
        }
      })
    }
  },
  mounted() {
    this.calendar = this.$('#vue-full-calendar')
    this.calendar.fullCalendar(this._.defaultsDeep(this.config, this.defaultConfig))
  },

  beforeDestroy() {
    // TODO
  },
  methods: {
    doExchangeShifts() {
      this.showExchangeShiftsDialog = false
    },
    exchangeShifts() {
      this.showExchangeShiftsDialog = true
    },
    doChangeWorkers() {
      this.showAddWorkersDialog = false
    },
    changeWorkers() {
      this.showAddWorkersDialog = true
    },
    doChangeShift() {
      this.showChangeShiftDialog = false
    },
    doFilter() {
      this.showFilterDialog = false
      this.calendar.fullCalendar('option', 'weekends', true)
    },
    handleWorkerChange() {
      this.isIndeterminate = this.selectWorkers.length > 0 && this.selectWorkers.length < this.workerMap.get(this.selectShift).length
      this.checkAll = this.selectWorkers.length === this.workerMap.get(this.selectShift).length
    },
    handleCheckAllChange(val) {
      this.selectWorkers = val ? this.workerMap.get(this.selectShift) : []
      this.isIndeterminate = false
    },
    changeShift() {
      this.selectWorkers = this.workerMap.get(this.selectShift)
      this.checkAll = true
      this.isIndeterminate = false
    },
    renderCustomEvent(event) {
      return event ? `<div>${event ? event.title : ''}</div>
                          <div class="workers ${this.viewWorker ? '' : 'hidden'}">
                            <span class="${event.workers[0] ? '' : 'hidden'} worker ${event.workers[0] && this.selectWorkers.includes(event.workers[0]) ? 'hightlight' : ''}">${event.workers[0] ? event.workers[0] : ''}</span>
                            <span class="${event.workers[1] ? '' : 'hidden'} worker ${event.workers[1] && this.selectWorkers.includes(event.workers[1]) ? 'hightlight' : ''}">${event.workers[1] ? event.workers[1] : ''}</span>
                            <span class="${event.workers[2] ? '' : 'hidden'} worker ${event.workers[2] && this.selectWorkers.includes(event.workers[2]) ? 'hightlight' : ''}">${event.workers[2] ? event.workers[2] : ''}</span>
                            <span class="${event.workers[3] ? '' : 'hidden'} worker ${event.workers[3] && this.selectWorkers.includes(event.workers[3]) ? 'hightlight' : ''}">${event.workers[3] ? event.workers[3] : ''}</span>
                            <span class="${event.workers[4] ? '' : 'hidden'} worker ${event.workers[4] && this.selectWorkers.includes(event.workers[4]) ? 'hightlight' : ''}">${event.workers[4] ? event.workers[4] : ''}</span>
                            <span style="padding-left:10px;padding-top:2px;padding-bottom:2px;float;right;">${event.workers[5] ? '...' : ''}</span>
                          </div>` : ''
    }
  }
}
</script>
<style lang="scss">
.fc .fc-view-container *, .fc-view-container::before, .fc-view-container::after{
  box-sizing: border-box!important;
}
.fc .fc-view-container .fc-month-view  {
  .fc-scroller{
    overflow: hidden!important;
    .fc-row{
      height:205px;
    }
  }
  .fc-bg{
    .fc-day{
      .wrapper{
        height:100%;
        display: flex;
        flex-direction: column;
        .header{
          height:23px;
        }
        .schedules{
          height:100%;
          flex:1;
          display: flex;
          flex-direction: row;
          &>div{
            flex:1;
            width:0px;
            border-right: 1px solid #ddd;
            cursor: pointer;
            &:hover{
              background-color: #f2f6fc;
            }
          }
          &>div:last-child{
            border-right: 0px;
          }
          .workers{
            color:#808080;
            padding-top:5px;
            font-size:14px;
          }
          .hidden{
            display:none!important;
          }
          .worker{
            display: block;
            padding:2px;
            margin: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border:1px solid #ddd;
            border-radius: 5px;
            &:hover{
              border:1px solid #c0c4cc;
              color:#909399;
            }
          }
          .hightlight{
            background-color: yellow;
          }
        }
      }
    }
  }
  .fc-content-skeleton{
    .fc-day-top{
      border-bottom: 1px solid #ddd;
      span{
        display:block;
        float: none!important;
        text-align:center;
      }
    }
    .fc-event-container{
      .event-wrapper{
        height:100%;
        display:flex;
        flex-direction: row;
        a{
          flex:1;
        }
        .fc-event{
          border: 0px;
          border-radius: 0px;
        }
      }
      .fc-title{
        color: #000;
      }
    }
  }
}
</style>
